<template>
  <div class="body">
	  <!-- 左边导航栏 -->
	  <van-sidebar v-model="activeKey">
	    <van-sidebar-item  v-for="(item,index) in list" :key="index" :title="item.subcname" @click="inin(item)"/>
	  </van-sidebar>
	  
	  <!-- 商品卡片 -->
	  <div class="left">
		  <van-card
		  v-for="(item,index) in listtwo"
		  :key="index"
		    :price="item.item.actualPrice"
		    :title="item.item.title"
		    :thumb="item.item.mainPic"
			v-if="index <= 5">
			<template #num>
				<van-stepper v-model="item.num" theme="round" button-size="22" disable-input :show-minus="item.num != 0" min="0"/>
			</template>
			</van-card>
			
			<van-submit-bar :price="num" button-text="提交订单">
			  <van-checkbox >全选</van-checkbox>
			  <template #default>
			   <van-icon name="cart-o" size='20px' color='blue' @click="showw"/>
			  </template>
			</van-submit-bar>
			
			<van-action-sheet v-model="show" title="购物车">
				<h3 @click="alldel">清空</h3>
				<div v-for="(item,index) in listtwo" :key="index" v-if="item.num > 0">
					<p>{{item.item.title}}</p>
					<img :src="item.item.mainPic">
					<div>￥{{numm}}</div>
					<van-stepper v-model="item.num" theme="round" button-size="22" disable-input min='0' default-value='0'/>
				</div>
				</van-action-sheet>
	  </div>
  </div>
</template>

<script>
	export default {
		data(){
			return {
				activeKey : 0,
				list : [],
				listtwo : [],
				show : false
			}
		},
		created() {
			this.$axios.get('http://api.kudesoft.cn/tdk/category').then(res => {
				this.list = res.data.data.data[0].subcategories
			})
		},
		computed:{
			num(){
				let a = 0;
				this.listtwo.map(item => {
					a += Number(item.num) * Number(item.item.actualPrice)
				})
				return a * 100
			},
			numm(){
				let a = 0;
				this.listtwo.map(item => {
					a += Number(item.num) * Number(item.item.actualPrice)
				})
				return a 
			},
		},
		methods:{
			inin(item){
				this.$axios.get('http://api.kudesoft.cn/tdk/goods',{
					params:{
						subcid : item.subcid
					}
				}).then(item => {
					item.data.data.data.list.map(item => {
						this.listtwo.push({
							num : 0,
							item
						})
					})
				})
			},
			showw(){
				this.show = !this.show
			},
			alldel(){
				 this.$dialog.confirm({
				   message: '您确定要全部清空吗？',
				 })
				   .then(() => {
				    this.listtwo = []
				   })
				   .catch(() => {
				     alert('乱取消什么呢你整挺好！')
				   });
			}
		}
	}
</script>

<style scoped>
	.body
	{
		display: flex;
	}
	
	.left
	{
		flex: 1;
	}
	
	img
	{
		width: 60px;
		height: 60px;
	}
</style>